<template>
  <div class="ttt-button"
       :class="[ type, { plain, disabled: loading || disabled, radius, link } ]"
       :style="buttonStyle"
       v-bind="$attrs"
       @click="handleClick">
    <loading-icon v-if="loading" :type="type" />
    <slot name="left">
      <i v-if="leftIcon" class="iconfont" :class="[leftIcon]"></i>
    </slot>
    <slot name="default" />
    <slot name="right">
      <i v-if="rightIcon" class="iconfont" :class="[rightIcon]"></i>
    </slot>
  </div>
</template>

<script setup lang="ts">
import LoadingIcon from '../TLoadingIcon/TLoadingIcon.vue'
import { computed } from 'vue'
import type { PropType, CSSProperties } from 'vue'
import type { ComponentsThemeType } from '../types/components'

const emits = defineEmits<{
  (e: 'click', value: MouseEvent): void
}>()

const props = defineProps({
  // 按钮类型
  type: {
    type: String as PropType<ComponentsThemeType>,
    default: 'default'
  },
  // 文本按钮
  link: {
    type: Boolean as PropType<boolean>,
    default: false
  },
  // 镂空
  plain: {
    type: Boolean as PropType<boolean>,
    default: false
  },
  // 加载中
  loading: {
    type: Boolean as PropType<boolean>,
    default: false
  },
  // 禁用
  disabled: {
    type: Boolean as PropType<boolean>,
    default: false
  },
  // 圆角
  radius: {
    type: [Boolean, String, Number] as PropType<boolean | string | number>,
    default: '8'
  },
  // 左边
  leftIcon: {
    type: String as PropType<string>,
    default: ''
  },
  // 右边
  rightIcon: {
    type: String as PropType<string>,
    default: ''
  }
})

const buttonStyle = computed<CSSProperties>((): CSSProperties => {
  let radius
  if (typeof props.radius === 'boolean') {
    radius = props.radius ? `9999999999999rem` : '0'
  } else {
    radius = `${props.radius}rem`
  }
  return {
    borderRadius: radius
  }
})

// 点击事件
const handleClick = (ev: MouseEvent) => {
  if (props.disabled || props.loading) return
  emits('click', ev)
}
</script>

<style scoped lang="scss">
@import "../scss/base.scss";

.ttt-button {
  gap: 10rem;
  height: var(--button-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 32rem;
  border: 1rem solid transparent;

  @each $type, $color in $button-color-list {
    &.#{$type} {
      background-color: $color;
      border-color: $color;
      color: #fff;

      &.disabled {
        cursor: not-allowed;
        background-color: lighten($color, 30%) !important;
        border-color: lighten($color, 30%) !important;
      }

      &.plain {
        background-color: lighten($color, 70%);
        color: $color;
        border-color: $color;

        &.disabled {
          color: lighten($color, 30%);
          background-color: #fff !important;
          border-color: lighten($color, 30%);
        }

        &.hover:hover {
          background-color: $color;
          color: #fff;
        }
      }

      &.link {
        color: $color;
        height: auto;
        border: none !important;
        background-color: transparent !important;

        &.disabled {
          color: lighten($color, 30%);
        }
      }
    }
  }
}
</style>
